<template>
	<view class="juanzengh5">
		<view class="index_pages" style="padding: 20rpx;" >
			<view  class="zupus_item" >
				<view class="item_info_foot flex ali-c">
					<image  class="tximgs" :src="photo_cdn1 + users.avatar" mode=""></image>
					<view class="inheritors">{{users.user || ''}}</view>
					<view class="" style="margin-left: 10rpx;color: #999;">发起筹款</view>
				</view>
				
				<view class="" style="font-size: 45rpx; font-weight: bold; margin-top: 30rpx;">
					{{users.title||'标题'}}
				</view>
				
				<view style="padding: 15rpx; border-radius: 15rpx; margin-top: 25rpx; background-color:#fff8f4;" >
					<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
						<view class="" style="font-size: 25rpx;">
							{{users.create_time||'2023-12-30'}}
						</view>
					</view>
					<view class="" style="margin-top: 15rpx;">
						<view class="" style="display: flex; justify-content: space-between; align-items:center;">
							<view class="" style="display: flex;font-size: 30rpx;align-items:center;">
								已筹:<view style="font-size: 45rpx; font-weight: bold;">{{users.money_count||'0'}}</view>元
							</view>
							<view class="" style="font-size: 30rpx;">
								急需:{{users.goal_money||'0'}}元
							</view>
						</view>
					</view>
					
					<!-- #ifndef MP-WEIXIN -->
					<view   class="jdbar" style="margin-top: 55rpx;">
							<view class="jdper" :per="users.pre" :style="{maxWidth:users.pre}"></view>
					</view>
					<!-- #endif -->
					
					<!-- #ifdef  MP-WEIXIN -->
					<slider :value="users.slider"  show-value  :disabled="true"   />
					<!-- #endif -->
					
					
					<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
						<view class="">
							捐赠次数:{{users.log_count||'0'}}次
						</view>
					</view>
				</view>
				<view class="" style="font-size: 35rpx; font-weight: bold; margin-top: 25rpx;margin-bottom: 10rpx;">
					筹款详情
				</view>
				<view :class="zhankai==false ? 'uni-ellipsis-5':'' " >
					 <rich-text  :nodes="repairRichText(users.content|| '')"  :preview="true"></rich-text>
				</view>
				<view class="" style="display: flex; justify-content: center;margin-top: 15rpx;" v-if='zhankai == false'>
					<button type="default" size="mini" :plain="true" @click="zhankai = true" >展开全文</button>
				</view>
				 
				<view class="" style="display: flex;flex-wrap:wrap;justify-content:space-between; margin-top: 30rpx;">
					<view class="" v-for="(item,index) in users.image" :key="index" >
						<image class="comment_img"
							:src="photo_cdn1+item"></image>
					</view>		
				</view>
				
				<view  v-if="users.type == '0'"  style="padding: 15rpx; border-radius: 15rpx; margin-top: 35rpx; background-color:#f5f6f8;" >
					<view class=""style="font-size: 35rpx; display: flex; justify-content: space-around;margin-bottom: 15rpx; margin-top: 15rpx;">
						<view class="" @click="moneyinputfun(10)" :style="{border:moneystyle == 10 ?'2px solid #ffba00':'1px solid #d1d1d6'}" style="font-size: 30rpx;  background-color: #fff; color: #ffa300; width: 160rpx; text-align: center;">
							10元
						</view>
						
						<view class="" @click="moneyinputfun(50)" :style="{border:moneystyle == 50 ?'2px solid #ffba00':'1px solid #d1d1d6'}" style="font-size: 30rpx;  background-color: #fff; color: #ffa300; width: 160rpx; text-align: center; ">
							50元
						</view>
						
						<view class="" @click="moneyinputfun(100)" :style="{border:moneystyle == 100 ?'2px solid #ffba00':'1px solid #d1d1d6'}" style="font-size: 30rpx;  background-color: #fff; color: #ffa300; width: 160rpx; text-align: center; ">
							100元
						</view>
						
						<view class="" @click="moneyinputfun(1000)" :style="{border:moneystyle == 1000 ?'2px solid #ffba00':'1px solid #d1d1d6'}" style="font-size: 30rpx;  background-color: #fff;  width: 160rpx; text-align: center;">
							<input  focus placeholder="自定义金额"  v-model="money"  :focus="false" maxlength="9"  type="number" style="display: flex;text-align: left;" />
						</view>
						
					</view>
					
					<view class="" style="margin-top: 25rpx;" >
						<view class="" style="font-size: 30rpx; font-weight: 600;">
							捐赠留言:
						</view>
						
						<view class="uni-textarea" style="width: 100%; display: flex; border-radius: 15rpx;margin-top: 15rpx;  ">
							<textarea auto-height  placeholder="说点什么..."  v-model="remark" style="border: 1rpx solid #d1d1d6; width: 100%; height: 60rxp;" />
						</view>
					</view>
					
					<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 25rpx;" >
						<view   @click="juankuan()" class="" style="width: 100%; height: 80rpx; text-align: center; display: flex; border-radius: 15rpx;  align-items:center;   justify-content:center; background-image: linear-gradient(0deg,#ff6e11,#ff9b11);">
							<view class="" style="font-size: 35rpx; font-weight: bold;color: #fff;"  >
								立即捐款
							</view>
						</view>
					</view>
				</view>
				
				<view style="padding: 15rpx; border-radius: 15rpx; margin-top: 25rpx; background-color:#fff8f4;" >
					<view class=""style="font-size: 35rpx; display: flex; align-items: center;flex-direction:column;">
						<view class="" style="display: flex;width: 100%;font-weight: bold; font-size: 35rpx;">
							筹款动态
						</view>
						<view class="" style="display: flex;width: 100%;">
							筹款金额:{{users.money_count||'0'}}元
						</view>
						<view class="" style="display: flex;width: 100%;">
							筹款次数：{{users.log_count||'0'}}
						</view>
					</view>
					<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
						<view class="" style="font-size: 25rpx;">
							<!-- 更新时间:{{list[list.length - 1].create_time||"" }} -->
						</view>
					</view>
				</view>
				
				<view style="padding: 15rpx; border-radius: 15rpx; margin-top: 25rpx; background-color:#fff8f4;" >
					<view class=""style="font-size: 35rpx; display: flex; align-items: center;flex-direction:column;">
						<view class="" style="display: flex;width: 100%;font-weight: bold; font-size: 35rpx;">
							筹款记录
						</view>
					</view>
				</view>
				
				<view class="item_info_foot" style="margin-top: 20rpx;" v-for="(item2,index2) in list " :key="index2" v-if="list != null" >
					<view class="" style="display: flex;">
						<view class="" style="width: 120rpx;">
							<image style="width: 120rpx; height: 120rpx;border-radius: 15%;"
							:src="photo_cdn1+ item2.avatar "></image>
						</view>	
						<view class="" style="width: 100%; margin-left: 15rpx;margin-top: 10rpx;">
							<view class="" style="font-weight: bold;font-size: 30rpx;">
								{{item2.nickname || ''}}
							</view>
							<view class="" style="font-size: 30rpx;display: flex;">
								捐赠: <view style="color: #ff6e11;font-weight: bold;">{{item2.money || '0'}}</view>元
							</view>
						</view>
					</view>
					<view class="">
						{{item2.remark || ''}}
					</view>
					<view class="" style="display: flex; justify-content: space-between;align-items:center;margin-top: 10rpx;" >
						<view class="" style="font-size: 25rpx;color: #999;">
							捐赠时间:{{item2.create_time || ''}}
						</view>
					</view>
				</view>
				<view class="item_info_foot" style="margin-top: 20rpx;" v-if="list == null">
					<view class="" style="font-size: 45rpx; display: flex; justify-content: center;">
						暂时无记录
					</view>
				</view>
			</view>	
		</view>		
		
		<paytype ref="paytype" @payreturn="payreturn" :price="need_pay"></paytype>
		<!-- 选择支付方式 -->
	</view>
</template>

<script>
	import {apppay} from "@/utils/apppay.js";
	import paytype from "@/components/paytype/paytype.vue";
	import {getDonationList,getDonationByInfo,carateDonation , updateDonation, payDonationLogs} from "@/utils/api/zupu.js" 
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default {
		components:{
			paytype,
		},
		data() {
			return {
				staticurl,
				photo_cdn1,
				zhankai:false,
				
				users:{
					title:null
				},
				list:null,
				moneystyle:null,
				id:null,
				
				money:null,//金额
				remark:null ,//备注
				
				need_pay:'',//创建订单支付金额
				order_info:{},//订单信息
				pay_way:'',//支付方式
				log_id:'',//支付日志id
				amount:'',//支付金额
				
			}
		},
		onLoad(Option) {
			console.log(Option.id)
			this.id = Option.id;
			this.getByList()
		},
		onShow() {
			
		},
		methods: {
			//选择完支付方式之后
			// paytype 1 微信 2支付宝
			payreturn(paytype){
				// pay_way:"weixin",//支付方式 '支付方式:weixin=微信支付,alipay=支付宝支付'
				console.info("paytype",paytype);
				if(paytype==1){
					this.pay_way = 'weixin';
					this.createOrderfun();
				}else if(paytype==2){//支付宝支付
					this.pay_way = 'alipay';
					this.createOrderfun();
				}
			},
			//创建订单
			createOrderfun(){
				console.log("创建订单")
				payDonationLogs({
					donation_id:this.users.id,
					money:this.money,
					remark:this.remark,
				}).then((res)=>{
					if(res.code==1){
						this.log_id = res.data.payLog.id;
						this.amount = res.data.orderInfo.need_pay;
						if(this.pay_way=='weixin'){
							this.weixinAlipayfun('weixin');
						}else{
							this.weixinAlipayfun('alipay');
						}
					}
				})
			},
			//微信支付宝支付
			weixinAlipayfun(paytype){
				//paytype 'weixin'微信 'alipay'支付宝
				apppay(
					this.log_id,
					this.amount,
					paytype,
				).then((res)=>{
					console.info(res);
					uni.showToast({
						title:"支付成功"
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
					
				}).catch((err)=>{
					console.log(err);
				})
			},
			juankuan(){

				
				if(!this.remark){
					this.remark="暂无留言。";
				}
				if(!this.moneystyle){
					this.$api.msg("请选择金额");
					return false;
				}
				
				if(this.moneystyle == 10 ){
					this.money = 10.00;
				}
				
				if(this.moneystyle == 50 ){
					this.money = 50.00;
				}
				
				if(this.moneystyle == 100 ){
					this.money = 100.00;
				}
				
				this.need_pay = this.money;
				this.$showModal({
					title:'提示',
					concent:`您确定要参与捐赠吗？`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					this.$refs.paytype.show();
				}).catch(err=>{
					console.log(err)
				})	
			},
			getByList(){
				getDonationByInfo({
					id:this.id
				}).then(res=>{ 
					console.log(res)
					this.users = res.data;
					if(res.data.list.length > 0){
						this.list = res.data.list;
					}
				})
			},
			moneyinputfun(e){
				this.moneystyle = e;
			},
			/**
			* 修复富文本图片宽度
			* @description 解决图片宽高超出显示不全问题(让其自适应)
			* @param {String} html - 富文本
			* @return String
			*/
			repairRichText(html) {
				// 去掉<img>中style /width / height属性
				let newContent = html.replace(/<img[^>]*>/gi, (match) => {
					match = match.replace(/style="[^"]+"/gi,                        '').replace(/style='[^']+'/gi, '')
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
					match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
					return match
				})
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')
					return match
				})
 
				// 去掉所有<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '')
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				)
				return newContent;
			},
		}
	}
</script>

<style lang="scss">
	.comment_img {
		width: 230rpx;
		height: 230rpx;
	}
	/* 文本溢出隐藏 两行 */
	.uni-ellipsis-5 {
		height: 150rpx;
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: 5;
		text-overflow: ellipsis;
		// max-height: 64rpx;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		display: -webkit-box!important;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical!important;
		/* #endif */
		
		line-height: 1.2;
		overflow: hidden;
	}
	.jdt {
		margin-left: 100px;
	}
	 
	.jd_title {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	 
	.jdbar {
		background: rgb(227, 227, 227);
		height: 10px;
		width: 100%;
	}
	 
	.jdper {
		height: 10px;
		background: #f30;
		max-width: 100%;
		width: 100%;
		position: relative;
		animation: aniBar 1s;
	}
	 
	.jdper::before {
		position: absolute;
		content: attr(per);
		background: #f30;
		padding: 2px 5px;
		border-radius: 2px;
		font-size: 12px;
		right: -15rpx;
		top: -30px;
		color: #fff;
		transform: translateX(50%); 
	}
	 
	.jdper::after {
		content: "";
		width: 10px;
		height: 10px;
		display: inline-block;
		background: #f30;
		position: absolute;
		right: 0;
		top: -18px;
		z-index: -1;
		border-radius: 2px;
		transform: translateX(50%) rotate(45deg);
	}
	 
	@keyframes aniBar {
		0% {
			width: 0;
		}
	 
		100% {
			width: 100%;
		}
	}
	.uni-ellipsis-1 {
		lines: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.tximgs{
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}
	.zupus_item{
		// padding: 18rpx 25rpx;
		margin-bottom: 20rpx;
		width: 710rpx;
		// height: 256rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		&.active{
			border: $themecolor 2rpx solid;
		}
		.peag{
			position: absolute;
			top: 0;
			right: 30rpx;
			.people_flag{
				width: 50rpx;
				height: 80rpx;			
			}
			.peag_text{
				font-size: 32rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				color: #FFFFFF;
			}
		}
		.itemimgss{
			width: 146rpx;
			height: 220rpx;
			position: relative;
			.family_name{
				z-index: 2;
				position: absolute;
				top: 16rpx;
				left: 98rpx;
				writing-mode: vertical-lr;
				// font-size: 30rpx;
				height: 144rpx;
				text-align: center;
			}
		}
		.zpimgs{
			width: 146rpx;
			height: 220rpx;
			background-size: 100% 100%;
		}
		.zupus_item_info{		
			margin-left: 36rpx;
	
			.zupu_names{
				color: #000000;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 1;
			}
			.fqr_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.rprs_text{
				margin-top: 20rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.create_time{
				margin-top: 40rpx;
				color: #000000;
				font-size: 24rpx;
				line-height: 1;
			}
			.editzp{
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
				position: absolute;
				right: 100rpx;
				top: 30rpx;
			}
			.contactccr{
				color: #FFFFFF;
				background-color: $themecolor;
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 14rpx;
			}
			
			
			.item_info_foot{
				margin-top: 16rpx;
				.tximgs{
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
				}
				.inheritors{
					margin-left: 20rpx;
					color: #AE8949;
					font-size: 24rpx;
					.tt_line{
						text-decoration: underline;
					}
				}
				.punumtext{
					margin-left: auto;
					color: #999999;
					font-size: 24rpx;
				}
			}
			
		}
	}
	@import "./juanzengh5.scss";
</style>
